<template>
  <div id="language">
    <div class="header">
      <Header :name="name"></Header>
    </div>
    <div v-for="item in data" :key="item.id" class="item">
      <p>{{ item.name }}</p>
      <li v-for="i in item.ls" :key="i.id">
        {{ i.name }}
        <input
          v-if="i.flag"
          type="checkbox"
          checked="true"
          style="width: 1rem; height: 1rem; margin-top: 1rem;"
        />
      </li>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import Header from "./Header.vue";
import { useRoute } from "vue-router";

const route = useRoute();
const name = route.query.name;
console.log(name);

const data = reactive([
  {
    id: 1,
    name: "建议语言",
    ls: [
      { id: 1, name: "简体中文", flag: true },
      { id: 2, name: "英文(英国)" },
      { id: 3, name: "英文(美国)" },
    ],
  },
  {
    id: 2,
    name: "其他语言",
    ls: [
      { id: 1, name: "西班牙语" },
      { id: 2, name: "阿拉伯语" },
      { id: 3, name: "德语" },
      { id: 4, name: "法语" },
      { id: 5, name: "意大利语" },
      { id: 6, name: "日语" },
    ],
  },
]);
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

#language {
  width: 100%;
  height: 100%;
}

.item {
  width: 90%;
  margin-left: 5%;
  border-radius: 1rem;
  border: 1px solid #ccc;
}

.item:last-child {
  margin-top: 3rem;
}

.item p {
  margin-left: 5%;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #5b5a5a;
}

li {
  list-style: none;
  height: 3rem;
  line-height: 3rem;
  width: 90%;
  margin-left: 5%;
  border-bottom: 1px solid #ccc;
  font-size: 1.2rem;
  display: flex;
  justify-content: space-between;
}

li:last-child {
  border-bottom: none;
}
</style>